<template>
  <div>
    <el-header class="header" height="74px">
      <el-container class="haeder_container">
        <div>
          <img src="../../assets/admin/kye_logo.263a77ab.png" class="logo" />
          <img src="../../assets/admin/header_plane.9e88dc0d.png" />
        </div>
        <div class="icons">
          <i class="el-icon-menu"></i>
          <div>
            <i class="el-icon-edit-outline"></i>
          </div>
        </div>
      </el-container>
    </el-header>
    <el-container class="container-item" style="height: calc(100vh - 74px)">
      <el-aside
        class="aside"
        :style="{ width: `${isCollapse ? 65 : 240}px`, transition: '0.4s' }"
      >
        <el-menu
          router
          :default-active="$route.path"
          background-color="#fff"
          text-color="#03050d"
          :style="{ height: 'calc(100vh-74px)', width: '230px' }"
          :collapse="isCollapse"
          class="el-menu-vertical-demo"
        >
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding-top: 20px;
            "
          >
            <img
              src="../../assets/admin/avatar_img.415c6336.png"
              width="40px"
              alt=""
            />
            <img
              src="../../assets/admin/icon_unverified.62a0699d.png"
              width="40px"
            />
            <p
              style="
                font-size: 1.2em;
                color: #03050d;
                font-weight: bold;
                margin-top: 10px;
              "
            >
              189 9657 6282
              <i class="el-icon-arrow-right" style="color: #8365f6"></i>
            </p>
            <p style="font-size: 13px; margin: 10px 0">
              未绑定客户编码
              <span style="color: #8365f6"
                >绑码 <i class="el-icon-arrow-right"></i
              ></span>
            </p>
          </div>

          <el-submenu index="/admin/1">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">查件</span>
            </template>
            <el-menu-item index="/admin/willbill-query">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">运单查询</span>
            </el-menu-item>
            <el-menu-item index="/admin/vihecle-query">
              <i class="el-icon-plus"></i>
              <span slot="title">整车查询</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="/admin/2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">寄件</span>
            </template>
            <el-menu-item index="/admin/order-send">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">下单寄件</span>
            </el-menu-item>
            <el-menu-item index="/admin/vihecle-send">
              <i class="el-icon-plus"></i>
              <span slot="title">整车寄件</span>
            </el-menu-item>
          </el-submenu>

          <el-menu-item index="/admin/time-inquire">
            <i class="el-icon-search"></i>
            <template slot="title"> 运费时效查询</template>
          </el-menu-item>

          <el-menu-item index="/admin/invoice">
            <i class="el-icon-tickets"></i>
            <template slot="title">
              <div class="recommend">推荐</div>
              支付开票</template
            >
          </el-menu-item>

          <el-submenu index="/admin/3">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span slot="title">设置中心</span>
            </template>
            <el-menu-item index="/admin/adress">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">地址簿</span>
            </el-menu-item>
            <el-menu-item index="/admin/print">
              <i class="el-icon-plus"></i>
              <span slot="title">打印设置</span>
            </el-menu-item>
            <el-menu-item index="/admin/admin-center">
              <i class="el-icon-plus"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
            <el-menu-item index="/admin/default-setting">
              <i class="el-icon-plus"></i>
              <span slot="title">默认设置</span>
            </el-menu-item>
            <el-menu-item index="/admin/individuation">
              <i class="el-icon-plus"></i>
              <span slot="title">个性化模块设置</span>
            </el-menu-item>
            <el-submenu index="/admin/4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">偏好设置</span>
              </template>
              <el-menu-item index="/admin/hobby-setting">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">收货偏好</span>
              </el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-menu-item index="/admin/coupon">
            <i class="el-icon-s-goods"></i>
            <template slot="title">我的优惠券</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container style="width: 1200px">
        <div class="tabs">
          <el-main>
            <!-- 二级路由 动态设置内容 -->
            <router-view />
          </el-main>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.recommend {
  position: absolute;
  right: 75px;
  top: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 40px;
  height: 20px;
  border: 1px solid #ff706d;
  background-color: #ff706d;
  color: #fff;
  font-size: 12px;
  border-radius: 30px 30px 30px 0;
}
.header {
  height: 74px;
  padding: 0 20px;
  position: relative;
  background-color: #9378fa;
  background-image: url("https://uc.ky-express.com/netc-pc-web-offline/20221110193219_eb5996f_f2eaf15/img/header_bg.c4a75ca0.png");

  .logo {
    width: 186px;
    height: 46px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .haeder_container {
    display: flex;
    justify-content: space-between;
  }
  .icons {
    display: flex;
    padding-top: 20px;
    font-size: 20px;
    .el-icon-menu {
      width: 36px;
    }
  }
}
.container-item {
  overflow: auto;
  min-width: 1110px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 59px;
  left: 0;
  right: 0;
  bottom: 0;
}

.asie::-webkit-scrollbar {
  display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
</style>
